<template>
  <v-dialog title="详情" :show.sync="dialogVisible" :closeOnClickModal="false" @beforeClose="beforeClose" width="1400px">
    <div v-if="dialogVisible">
      <div class="basic-from">
        <div class="card-title">基本信息</div>
        <el-form :model="formData" size="small" ref="form" class="form-wrap" :rules="rules">
          <el-form-item label="部门名称" prop="unit_name">
            <span class="labelFont">{{formData.unitName}}</span>
          </el-form-item>
          <el-form-item label="报销编号" prop="reimbursementNm">
            <span class="labelFont">{{formData.reimbursementNm}}</span>
          </el-form-item>
          <el-form-item label="申请时间" prop="reqStartTime">
            <span class="labelFont">{{formData.reqStartTime.slice(0, 10)}}</span>
          </el-form-item>
          <el-form-item label="申请人" prop="reqPerson">
            <span class="labelFont">{{formData.reqPerson}}</span>
          </el-form-item>
          <el-form-item label="审批模板" prop="approveType">
            <span class="labelFont" v-if="approveTypeName">{{approveTypeName}}</span>
          </el-form-item>
          <el-form-item label="创建人" prop="approveType">
            <span class="labelFont">{{formData.createName}}</span>
          </el-form-item>
          <el-form-item label="创建时间" prop="approveType">
            <span class="labelFont">{{formData.createTime}}</span>
          </el-form-item>
        </el-form>
        <section class="section" ref="printTemplate" id="printTemplate">
          <lookapproveForm ref="lookapproveForm" v-if="formData.approveType=='0'" :approveData="approveData" />
          <lookPaymentApproveForm ref="lookPaymentApproveForm" v-else-if="formData.approveType=='1'" :paymentApproveData="paymentApproveData" />
          <lookFundSupervisionPaymentForm
            ref="lookFundSupervisionPaymentForm"
            v-else-if="formData.approveType=='2'"
            :fundSupervisionPaymentFormData="fundSupervisionPaymentFormData"
          />
        </section>
      </div>
    </div>
    <div slot="foot">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </div>
  </v-dialog>
</template>

 <script>
import { getDictAndPlease } from "~/utils";
import { mapState } from "vuex";
import printJS from "print-js";
import Print from "~/plugins/print";

import {
  getObj,
  addObj,
  putObj
} from "@/views/wy-reimbursement/api/reimbursement";
import lookapproveForm from "~/views/wy-reimbursement/components/look-approve-form";
import lookPaymentApproveForm from "~/views/wy-reimbursement/components/look-payment-approve-form";
import lookFundSupervisionPaymentForm from "~/views/wy-reimbursement/components/look-fund-supervision-payment-form";

export default {
  name: "new-reimbursement-edit",
  components: {
    lookapproveForm,
    lookPaymentApproveForm,
    lookFundSupervisionPaymentForm
  },
  mounted () {
    this.remoteQuery();
  },
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      formData: {
        unitName: "",
        reimbursementCode: "",
        applyTime: "",
        applyPerson: "",
        approveTemplate: "",
        approveTemplateId: "",
        createTime: "",
        createName: ""
      },
      approveData: {
        dealer: "",
        applyTime: "",
        applyPayment: "",
        spendingContent: "",
        departmentOpinion: "",
        inchargeOpinion: ""
      },
      paymentApproveData: {},
      fundSupervisionPaymentFormData: {},

      payment: {},
      printData: {
        name: ""
      },
      rules: {
        unitName: [
          { required: true, message: "单位名称", trigger: "blur" }
        ],
        reimbursementCode: [
          { required: true, message: "报销编号", trigger: "blur" }
        ],
        reimbursementName: [
          { required: true, message: "报销名称", trigger: "blur" }
        ],
        applyStartTime: [
          { required: true, message: "申请时间", trigger: "change" }
        ],
        applyPerson: [
          { required: true, message: "申请人", trigger: "blur" }
        ],
        approveTemplate: [
          { required: true, message: "审批模板", trigger: "change" }
        ]
      },
      options: [],
      optionsCopy: [],
      value: "",
      //相当于报销ID,用这个属性传递给子组件，然后子组件用这个属性查询数据
      approveTemplateId: ""
    };
  },
  computed: {
    approveTypeName () {
      return {
        '0': '审批表',
        '1': '付款审批表',
        '2': '资金监管付款表',
      }[this.formData.approveType] || ''
    }
  },
  methods: {
    formatDate (date) {
      //设置时间转换格式

      date = new Date(date);
      var y = date.getFullYear(); //获取年

      var m = date.getMonth() + 1; //获取月

      m = m < 10 ? "0" + m : m; //判断月是否大于10

      var d = date.getDate(); //获取日

      d = d < 10 ? "0" + d : d; //判断日期是否大10

      return y + "-" + m + "-" + d; //返回时间格式
    },
    show (val) {
      //
      this.dialogVisible = true;
      //这里弹出框接收列表传过来的数据
      this.formData.reimbursementId = val.reimbursement_id;
      this.formData.applyStartTime = val.apply_start_time;
      this.formData.reqStartTime = val.req_start_time;
      this.formData.reqPerson = val.req_person;
      this.formData.reimbursementNm = val.reimbursement_nm;
      this.formData.approveType = val.approve_type;
      this.formData.reimbursementName = val.reimbursement_name;
      this.formData.reimbursementCode = val.reimbursement_code;
      this.formData.approveTemplate = val.approve_template;
      this.formData.createName = val.create_name;
      this.formData.createTime = val.create_time;

      //qh 8-11 +:申请部门
      this.formData.unitName = val.unit_name;
      //qh 8-11 +:申请人
      this.formData.applyPerson = val.apply_person;
      //接收审批表的信息
      this.approveData.applyPayment = val.req_price;
      this.approveData.applyTime = val.req_start_time;
      this.approveData.approveTemplateId = val.approve_template_id;
      this.approveData.departmentOpinion = val.department_opinion;
      this.approveData.inchargeOpinion = val.leader_opinion;
      this.approveData.spendingContent = val.expenditure_content;
      this.approveData.dealer = val.handler;
      //直接传整行数据方便
      this.paymentApproveData = val;
      this.fundSupervisionPaymentFormData = val;
      //    if( this.formData.reimbursementId){
      //    //页面传过来一个id,然后用这个id查询一条数据，显示在编辑页面上。
      //    //查询一条数据
      //    this.queryItem()
      // }
    },
    remoteQuery () {
      this.options = getDictAndPlease("approve_template");
      this.optionsCopy = this.options;
      console.log(this.options);
    },
    prints () {
      this.remove_ie_header_and_footer();
      this.$Print(this.$refs.printTemplate);
    },
    remove_ie_header_and_footer () {
      var hkey_path;
      hkey_path =
        "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
      try {
        var RegWsh = new ActiveXObject("WScript.Shell");
        RegWsh.RegWrite(hkey_path + "header", "");
        RegWsh.RegWrite(hkey_path + "footer", "");
      } catch (e) { }
    },
    dataFilter (val) {
      this.formData.approveTemplate = val;
      if (val) {
        //val存在
        this.options = this.optionsCopy.filter(item => {
          if (
            !!~item.label.indexOf(val) ||
            !!~item.label.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        //val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    queryItem () {
      //查询单条报销记录
      getObj(this.formData.reimbursementId).then(respdata => {
        this.formData = respdata.data.data;
        this.approveTemplateId = respdata.data.data.approveTemplateId;
      });
    },
    beforeClose (done) {
      this.dialogVisible = false;
    }
  }
};

 </script>

<style scoped lang='scss'>
.labelFont {
  font-size: 14px;
  color: #999999;
}
.printButton {
  float: right;
  margin: 10px 50px;
}
.section {
  width: 100%;
}
@media print {
  .card-box {
    margin-left: -80px;
    width: 95%;
    /*text-align: center;*/
    margin-bottom: 14mm;
    border-bottom: 0;
  }
}

@page {
  size: auto A4 landscape;
  /*size: auto;*/
  margin: 3mm;
}
</style>
